<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .rela{
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            background-color: black;
        }
        .ab1{
            width: 90px;
            height: 90px;
            position: absolute;
            left: 2px;
            top: 2px;
            background-color: red;
        }
        .ab3{
            width: 70px;
            height: 70px;
            position: absolute;
            left: 22px;
            top: 22px;
            background-color: green;
            z-index: 1;
        }
        .ab2{
            width: 80px;
            height: 80px;
            position: absolute;
            left: 12px;
            top: 12px;
            z-index: 2;
            background-color: blue;
        }

    </style>

</head>
<body>
<!--
一.定位(position)
设定元素在文档中的位置。会将标签(元素)转换为块级，

2.定位分类(属性值)
    1)static:静态定位
        默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流(文档流)
    2)relative:相对定位
        占用标准流(文档流)，它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做
    3)absolute:绝对定位
        脱离文档流，相对于body做偏移。
        绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素是absolute元素的父级
        一般都是结合使用
    4)fixed：固定定位
        脱离文档流，相对于浏览器窗口左上角（0，0）做偏移
        一般在开发中用来固定导航栏

3.z-index
    当多个元素添加绝对定位（absolute），元素将会叠加在一起，使用z-index可以设置元素显示的层次
    文档流默认的z-index的值为0
    用在static和relative元素上无效
-->

<div class="rela">
    <div class="ab1">

    </div>
    <div class="ab2">

    </div>
    <div class="ab3">

    </div>
</div>




</body>
</html>